<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>
<body>
    <form action="" style="text-align:center;" onsubmit="subfu()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="clickfn()">
    </form>
    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>学分</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>80</td>
            <td>良好</td>
        </tr>
        <tr align="center">
            <td>003</td>
            <td>王五</td>
            <td>70</td>
            <td>及格</td>
        </tr>
    </table>
</body>

<script>
    // 提交事件
    function subfu(){
        console.log("提交成功");
        return false;
    }
    // 失去焦点事件
    function bfn(){
        console.log("失去焦点");
    }
    // 获得焦点事件
    function ffn(){
        console.log("获得焦点");
    }
    // 键盘按下事件
    function kfn(){
        console.log("按下键盘");
    }
    // 单击事件
    function clickfn(){
        console.log("单击事件");
    }
    // 鼠标移入事件
    function over(){
        console.log("鼠标移入");
    }
    // 鼠标移出事件
    function out(){
        console.log("鼠标移出");
    }
</script>
</html>